/**
 * @description  流动性风险
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Select, Row, Col } from 'antd';
import { SecondHeaderC, InputNumberC } from '../../../comps';
const FormItem = Form.Item;
const rate = [
  { title: '5%', value: 0.05 },
  { title: '10%', value: 0.1 },
  { title: '15%', value: 0.15 },
  { title: '20%', value: 0.2 },
  { title: '25%', value: 0.25 },
  { title: '30%', value: 0.3 },
  { title: '35%', value: 0.35 },
  { title: '40%', value: 0.4 },
  { title: '45%', value: 0.45 },
  { title: '50%', value: 0.5 },
  { title: '55%', value: 0.55 },
  { title: '60%', value: 0.6 },
  { title: '65%', value: 0.65 },
  { title: '70%', value: 0.7 },
  { title: '75%', value: 0.75 },
  { title: '80%', value: 0.8 },
  { title: '85%', value: 0.85 },
  { title: '90%', value: 0.9 },
  { title: '95%', value: 0.95 },
  { title: '100%', value: 1.0 },
];
const FormItemLayout = {
  labelCol: {
    xs: { span: 7, offset: 0 },
    sm: { span: 11, offset: 0 },
    md: { span: 11, offset: 0 },
    lg: { span: 11, offset: 0 },
    xl: { span: 10, offset: 0 },
    xxl: { span: 8, offset: 0 },
  },
  wrapperCol: {
    xs: { span: 14, offset: 0 },
    sm: { span: 10, offset: 0 },
    md: { span: 10, offset: 0 },
    lg: { span: 10, offset: 0 },
    xl: { span: 11, offset: 0 },
    xxl: { span: 13, offset: 0 },
  },
};
@Form.create()
class ShowModal extends PureComponent {
  constructor() {
    super();
    this.state = {};
  }

  componentDidMount() {
    this.props.onRef(this);
  }

  // 清缓存
  resetDatas = () => {
    const { form } = this.props;
    form.resetFields();
  };

  // 获取下方表格数据
  getData = (e) => {
    const {
      form: { validateFields },
      rowId,
    } = this.props;
    let query = {};
    validateFields((err, fieldsValue) => {
      if (!err) {
        query = fieldsValue;
      }
    });
    return query;
  };

  showModal = () => {
    const {
      form: { getFieldDecorator },
      args,
    } = this.props;
    return (
      <div>
        <Form>
          <div>
            <SecondHeaderC title='股票' />
            <Row>
              <Col span={12}>
                <FormItem label={'预设参与率'} {...FormItemLayout}>
                  {getFieldDecorator('stockRate', {
                    initialValue: args.stockRate,
                    rules: [{ required: true, message: `请选择预设参与率` }],
                  })(
                    <Select placeholder='请选择'>
                      {rate
                        ? rate.map((item) => {
                            return (
                              <Option key={item.value} value={item.value}>
                                {item.title}
                              </Option>
                            );
                          })
                        : null}
                    </Select>,
                  )}
                </FormItem>
              </Col>
              <Col span={12}>
                <InputNumberC
                  title='预设成交量天数'
                  dataIndex='stockDays'
                  placeholder='请输入'
                  min={1}
                  max={30}
                  initialValue={args.stockDays}
                  form={this.props.form}
                  formItemLayout={FormItemLayout}
                  rules={[{ required: true, message: `请输入预设成交量天数` }]}
                  unit='天'
                />
              </Col>
            </Row>
          </div>
          <div>
            <SecondHeaderC title='债券' />
            <Row>
              <Col span={12}>
                <FormItem label={'预设参与率'} {...FormItemLayout}>
                  {getFieldDecorator('bondRate', {
                    initialValue: args.bondRate,
                    rules: [{ required: true, message: `请选择预设参与率` }],
                  })(
                    <Select placeholder='请选择'>
                      {rate
                        ? rate.map((item) => {
                            return (
                              <Option key={item.value} value={item.value}>
                                {item.title}
                              </Option>
                            );
                          })
                        : null}
                    </Select>,
                  )}
                </FormItem>
              </Col>
              <Col span={12}>
                <InputNumberC
                  title='预设成交量天数'
                  dataIndex='bondDays'
                  placeholder='请输入'
                  min={1}
                  max={30}
                  initialValue={args.bondDays}
                  form={this.props.form}
                  formItemLayout={FormItemLayout}
                  rules={[{ required: true, message: `请输入预设成交量天数` }]}
                  unit='天'
                />
              </Col>
            </Row>
          </div>
          <div>
            <SecondHeaderC title='基金-场内（ETF）基金' />
            <Row>
              <Col span={12}>
                <FormItem label={'预设参与率'} {...FormItemLayout}>
                  {getFieldDecorator('FundRate', {
                    initialValue: args.FundRate,
                    rules: [{ required: true, message: `请选择预设参与率` }],
                  })(
                    <Select placeholder='请选择'>
                      {rate
                        ? rate.map((item) => {
                            return (
                              <Option key={item.value} value={item.value}>
                                {item.title}
                              </Option>
                            );
                          })
                        : null}
                    </Select>,
                  )}
                </FormItem>
              </Col>
              <Col span={12}>
                <InputNumberC
                  title='预设成交量天数'
                  dataIndex='FundDays'
                  placeholder='请输入'
                  min={1}
                  max={30}
                  initialValue={args.FundDays}
                  form={this.props.form}
                  formItemLayout={FormItemLayout}
                  rules={[{ required: true, message: `请输入预设成交量天数` }]}
                  unit='天'
                />
              </Col>
            </Row>
          </div>
        </Form>
      </div>
    );
  };

  render() {
    return <div>{this.showModal()}</div>;
  }
}
export default connect(({}) => ({}))(ShowModal);
